<template>
    <div>
        <el-table
            :data="tabledata.list"
            align="center"
            :height="tabledata.height"
            border:true
            :header-cell-style="tabledata.headerCellStyle"
            :cell-style="tabledata.cellStyle"
            :header-cell-class-name="tabledata.headerCellClassName"
            :ref="tabledata.ref"
            v-loading="tabledata.loading"
            :tooltip-effect="tabledata.tooltipEffect"
            @selection-change="handleSelectionChange"
            @row-click="handdle"
            :highlight-current-row="tabledata.highlight"
            style="width: 100%"
            row-key="id"
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
        <!-- 便利表格数据 -->
            <template v-for="item in tabledata.datalist">
                <el-table-column
                    :key="item.prop"
                    :type="item.type"
                    :fixed="item.fixed"
                    :prop="item.prop"
                    :label="item.label"
                    :row-class-name="item.tableRowClassName"
                    :min-width="item.width"
                    :show-overflow-tooltip="true"
                >
                <!-- 遍历子表格 -->
                    <el-table-column
                        v-for="child in item.children"
                        :prop="child.prop"
                        :label="child.label"
                        :width="child.width"
                        :key="child.x"
                    />
                    <!-- 检查表格是否有副操作 -->
                    <template v-if="item.tem" v-slot:default="temslot">
                        <!-- 遍历表格操作 -->
                        <el-button
                            type="text"
                            size="small"
                            @click="row(temslot.$index, temslot.row, index)"
                            v-for="index in item.tem"
                            v-show="item.tem[0].num"
                            :key="index.i"
                            :disabled="index.disabled"
                        >
                            {{ index.operation }}
                        </el-button>
                        <!-- 检查遍历表格下拉框 -->
                        <!-- <el-select v-if="item.tem[0].label1" v-model="temslot.row.value1" placeholder="请选择">
                            <el-option
                                v-for="index in item.tem"
                                :key="index.value"
                                :label="index.label1"
                                :value="index.value"
                            >
                            </el-option>
                        </el-select>
                        
                        <el-select v-if="item.tem[0].label2" v-model="temslot.row.value2" placeholder="请选择">
                            <el-option
                                v-for="index in item.tem"
                                :key="index.value"
                                :label="index.label2"
                                :value="index.value"
                            >
                            </el-option>
                        </el-select>
                        <el-input
                            class="input"
                            v-if="item.tem[0].search || item.tem[0].search === ''"
                            v-model="temslot.row.search"
                            size="mini"
                            :placeholder="item.placeholder"
                        /> -->
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination
            v-if="tabledata.pagination"
            class="page"
            :current-page="tabledata.pagination.pageNo"
            background
            :page-sizes="tabledata.pagination.pagesizes"
            :page-size="tabledata.pagination.pagesize"
            :layout="tabledata.pagination.layout"
            :total="tabledata.pagination.total"
            @current-change="tabledata.pagination.handleCurrentChange"
        />
    </div>
</template>
<script>
export default {
    props: {
        tabledata: {
            type: Object,
            require: true
        }
    },
    data() {
        return {
            value: [{}, {}]
        }
    },
    methods: {
        // 点击表格选择框返回表格行数据
        handleSelectionChange(val) {
            this.$emit('selection', val)
        },
        // 某一行被点击时会触发该事件
        handdle(row, event, column) {
            this.$emit('rowClick', row, event, column)
        },
        row(index, row, num) {
            this.$emit('row', index, row, num)
        }
    }
}
</script>
<style scoped>
.page {
    margin: 16px 0 0 0;
}
::v-deep .el-input__inner {
    border: 0;
}
.input {
    width: 80%;
}
</style>
